<script setup lang="ts">
import {computed, ref, useAttrs, watch, type Ref} from 'vue'
import type{InputProps ,InputEmits} from './type'
import Icon from '../Icon/Icon.vue';
defineOptions({
  name:'VKInput',
  inheritAttrs:false//取消继承属性
})
const attrs = useAttrs()
const inputRef = ref() as Ref<HTMLElement>
const props = withDefaults(defineProps<InputProps>(),{type:'text',autocomplete:'off'})
const emits = defineEmits<InputEmits>()
defineExpose({
  ref:inputRef
})
const passwordVisible = ref<boolean>(false)

const innerValue = ref<string>(props.modelValue)
const handleInput = ()=>{
  emits('update:modelValue',innerValue.value)
  emits('input',innerValue.value)
}
const handleChange = ()=>{
  emits('change',innerValue.value)
}
watch(()=>props.modelValue,(val:string)=>{
  innerValue.value = val
})

// 清空功能：当 input 里面有值，且 input 处于 focus 状态，suffix 区域会出现 ‘清空图标’，点击后 input 的内容清空。
const isfoucus = ref(false)
const isShowClear = computed(()=>{
  return props.clearable && !!innerValue.value && !props.disabled &&  isfoucus.value ; 
})
const handleFocus = (event:FocusEvent)=>{
  isfoucus.value = true
  emits('focus',event)
}
const handleBlur = (event:FocusEvent)=>{
  console.log('你小子触发了')
  isfoucus.value = false
  emits('blur',event)
}
const handleClear =()=>{
  console.log('qingkong')
  innerValue.value = ''
  emits('update:modelValue','')
  emits('input','')
  emits('change','')
} 

// 支持密码显示与不显示 的 切换
// input 的值不为空，右侧显示图标，点击图标切换 显示与隐藏模式
const isShowEye = computed(()=>{
  return props.showPassword && !!innerValue.value && !props.disabled
})
const handleEye = ()=>{
  console.log('切换眼睛')
  passwordVisible.value = !passwordVisible.value
}

</script>
<template>
  <div
  class="wf-input"
  :class="{
    [`wf-input--${type}`]:type,
    [`wf-input--${size}`]:size,
    'is-disabled':disabled,
    'is-prepend':$slots.prepend,
    'is-append':$slots.append,
    'is-prefix':$slots.prefix,
    'is-suffix':$slots.suffix,
  }"
  >
  <!-- Input -->
   <template  v-if="type !== 'textarea'">
    <!-- prepend slot -->
    <div v-if="$slots.prepend" class="wf-input_prepend">
      <slot name="prepend"/>
    </div>

    <div class="wf-input_wrapper">
      <!-- prefix slot -->
      <span v-if="$slots.prefix" class="wf-input_prefix">
        <slot name="prefix" />
      </span>
      <input 
        ref="inputRef"
        class="wf-input_inner"
        :type="showPassword ? (passwordVisible ? 'text' : 'password') : type"
        :disabled=disabled
        v-bind="attrs"
        v-model="innerValue"
        @input="handleInput"
        @change="handleChange"
        @focus="handleFocus"
        @blur="handleBlur"
        :placeholder="placeholder"
        :readonly="readonly"
        :autocomplete="autocomplete"
        :autofocus="autofocus"
        :form="form"
        >
      <!-- suffix slot -->
      <span class="wf-input_suffix" v-if="$slots.suffix || isShowClear || isShowEye">
        <slot name="suffix" />
        <Icon 
        v-if="isShowClear"
        class="wf-input--clear"
        icon="circle-xmark"
        @click="handleClear"
        @mousedown.prevent=""
        />
        <Icon 
        v-if=" isShowEye && passwordVisible"
        class="wf-input--password"
        icon="eye"
        @click="handleEye"
        />
        <Icon 
        v-if="isShowEye && !passwordVisible "
        class="wf-input--password"
        icon="eye-slash"
        @click="handleEye"
        />
      </span>
    </div>
    
    <!-- append slot -->
    <div v-if="$slots.append" class="wf-input_append">
      <slot name="append"/>
    </div>
  </template>
  <!-- textarea -->
   <template v-else>
    <textarea 
    class="wf-textarea_inner"
    :disabled=disabled
    v-model="innerValue"
    v-bind="attrs"
    @input="handleInput"
    @focus="handleFocus"
    @blur="handleBlur"
    @change="handleChange"
    :placeholder="placeholder"
    :readonly="readonly"
    :autocomplete="autocomplete"
    :autofocus="autofocus"
    :form="form"
    ></textarea>
   </template>
  </div>
</template>
<style scoped>

</style>